<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/layui/css/layui.css">
<script type="text/javascript" src="/layui/layui.js"></script>
<title>Insert title here</title>
</head>
<body>
			
		
	<div>
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">用户名称</label>
					<div class="layui-input-inline">
						<input type="text" id="UserName" name="UserName"
							lay-verify="title" autocomplete="off" placeholder="请输入"
							class="layui-input">
					</div>
					
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">签到状态</label>
					<div class="layui-input-block">
						<select class="CheckState" id="CheckState" lay-filter="aihao">
							<option value=""></option>
							<option value="已签退">已签退</option>
							<option value="已签到">已签到</option>
							

						</select>
					</div>
				</div>
				
				<div class="layui-inline">
					<label class="layui-form-label">签到时间</label>
					<div class="layui-input-inline">
						<input type="text" id="beginCheckInTime" name="beginCheckInTime"
							placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline">
						<input type="text" id="endCheckInTime" name="endCheckInTime"
							placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div class="layui-inline">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn" lay-submit=""
							lay-filter="cha">检索</button>

					</div>
				</div>
			</div>

		</form>
	</div>

	<table id="demo" lay-filter="test"></table>
	
	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">签退</a>
	</script>
 
<script>
	layui.use(['table','form','laydate'], function(){
	  var table = layui.table;
	  var form=layui.form;
	  var laydate=layui.laydate;
	  var $=layui.$;
	    laydate.render({
   			 elem: '#beginCheckInTime' //指定元素
  		});
  		laydate.render({
   			 elem: '#endCheckInTime' //指定元素
  		});
	  //第一个实例
	  table.render({
	    elem: '#demo'
	    ,id:'table_user_id'
	    ,url: '/userchecks/getUserchecks' //数据接口
	    ,page: true //开启分页
	    ,cols: [[ //表头
	      {field: 'Id', title: 'ID', sort: true, fixed: 'left'}
	      ,{field: 'UserId', title: '用户Id',width:80}
	      ,{field: 'UserName', title: '用户名称',width:80}
	      ,{field: 'CheckInTime', title: '签到时间'} 
	      ,{field: 'CheckState', title: '签到状态'}
	      ,{field: 'IsCancel', title: '是否取消签到'}
	      ,{field: 'CheckOutTime', title: '取消签到时间'}
	      ,{fixed: 'right', width:200, align:'center', toolbar: '#barDemo'}   
	    ]]
	  });
	  
	  //检索
	  form.on('submit(cha)',function(){	  	
	  	table.reload('table_user_id',{
			  	where:{
			  		UserName:$("#UserName").val(),
			  		CheckState:$("#CheckState").val(),
			  		beginCheckInTime:$("#beginCheckInTime").val(),
			  		endCheckInTime:$("#endCheckInTime").val()
			  		
			  	}
	 		 })
	  		 
	 	 return false;
	  })
	   
	   
	   
	   
	   	//工具条事件
			table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
				console.log(data);
				if (layEvent === 'edit') { //编辑
					//修改方法
					
					if(data.CheckState=="已签退"){
					layer.msg("不可重复签退");
					return false;
					}
				$.post("/userchecks/updateUserchecks", {
					id:data.Id
				}, function (res) {
					if (res.code == "0") {
						layer.closeAll();
						layer.msg("修改成功");
						table.reload("table_user_id");
					} else{
						layer.msg("修改失败");
					}
				}, "json");
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	
				}

			});
	});
</script>
</body>
</html>